<template>
<page path-name="table">
    <panel title="基本表格" helper="表格样式参考metronic的Table">
        <v-table :url="tableUrl" :size="15" @table:load="loadTable">
            <table class="table table-striped table-hover" >
                <thead>
                    <tr>
                        <th width="25%">测试</th>
                        <th width="25%">测试</th>
                        <th width="25%">测试</th>
                        <th width="25%">测试</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="tableData.length > 0" v-for="item in tableData">
                        <td>{{item["1"]}}</td>
                        <td>{{item["1"]}}</td>
                        <td>{{item["1"]}}</td>
                        <td>{{item["1"]}}</td>
                    </tr>
                </tbody>
            </table>
        </v-table>
    </panel>

    <panel title="带滚动的表格" helper="表格样式参考metronic的Table">
        <span slot="actions">
            <button type="button" class="btn btn-circle btn-default" @click="updateTable">修改表值</button>
        </span>
        <v-table :url="tableUrl" :size="15" :paging="false" @table:load="loadTable" :total="tableTotal">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th width="25%">测试</th>
                        <th width="25%">测试</th>
                        <th width="25%">测试</th>
                        <th width="25%">测试</th>
                    </tr>
                </thead>
            </table>
            <scroller :height="200">
                <table class="table table-striped">
                    <tbody>

                        <tr v-for="item in tableData" >
                            <td>{{item["1"]}}</td>
                            <td>{{item["1"]}}</td>
                            <td>{{item["1"]}}</td>
                            <td>{{item.name}}</td>
                        </tr>
                    </tbody>
                </table>
            </scroller>
        </v-table>
    </panel>

    <panel title="带查询的表格" helper="表格样式参考metronic的Table">
        <query-table :url="tableUrl" :filter="filter" :size="12" @querytable:load="loadTable">
            <span slot="query">
                <div class="form-group form-md-line-input has-info">
                    <label>支付方式：</label>
                    <select class="form-control" name="type">
                        <option value="1" selected>全部</option>
                        <option value="2">现金</option>
                        <option value="3">在线支付</option>
                    </select>
                    <div class="form-control-focus">
                    </div>
                </div>
                <div class="form-group form-md-line-input has-info">
                    <label>时间：</label>
                    <input type="text" name="1"  class="form-control" placeholder="开始时间" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:00'})">
                    <input type="text" name="2"  class="form-control" placeholder="结束时间" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:00'})">
                    <div class="form-control-focus">
                    </div>
                </div>
            </span>
            <table class="table table-striped table-hover" >
                <thead>
                    <tr>
                        <th width="25%">测试</th>
                        <th width="25%">测试</th>
                        <th width="25%">测试</th>
                        <th width="25%">测试</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="tableData.length > 0" v-for="item in tableData">
                        <td>{{item["1"]}}</td>
                        <td>{{item["1"]}}</td>
                        <td>{{item["1"]}}</td>
                        <td>{{item["1"]}}</td>
                    </tr>
                </tbody>
            </table>
        </query-table>
    </panel>
</page>
</template>
<script>
import Page from '../../../src/components/page.vue'
import Panel from '../../../src/components/panel.vue'
import VTable from '../../../src/components/table.vue'
import Scroller from '../../../src/components/scroller.vue'
import QueryTable from '../../../src/components/query-table.vue'
import config from '../config'

export default{
    components:{
        Page,
        Panel,
        VTable,
        Scroller,
        QueryTable
    },
    data(){
        return {
            path: '',
            tableData: [],
            filter:{
                type: '1'
            },
            tableUrl: config.tableDataUrl,
            tableTotal:0
        }
    },
    route:{
        data({to:{path}}){
            this.path = path
        }
    },
    methods:{
        loadTable(data){
            console.log(data)
            this.tableData = data.test
            this.tableTotal = 90
        },
        updateTable(){
            this.tableData[5].name = 9
        }
    }
}
</script>